<template>
	<div class="u-page" style="background:#f7f7f7">
		<section class="aui-flexView">
			<section class="aui-scrollView">
				<div class="aui-order-box">
					<div class="aui-flex aui-flex-default aui-mar15" @click="toTaskDetail">
						<div class="aui-flex-goods">
							<img :src="TaskInfo.Pictures.split(',')[0]" alt="">
						</div>
						<div class="aui-flex-box">
							<h2>{{TaskInfo.Subject}}</h2>
							<div class="aui-tag" v-for="(item, index) in KeyWordList">
								<u-tag
									:text="item.label"
									mode="dark"
									size="mini"
									bg-color="#7688e8"
								></u-tag>
							</div>
						</div>
					</div>
					
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">职位报酬</div>
						<u-input v-model="TaskInfo.Salary" placeholder="请填写报酬"></u-input>
					</div>
					
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">招聘名额(人)</div>
						<u-input type="number" v-model="TaskInfo.TotalQuota" placeholder="请填写招聘名额"></u-input>
					</div>
					
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">是否匹配拍档</div>
						<div class="aui-flex-triangle" @click="Matching_show = true">{{TaskInfo.EnableMatching}}</div>
						<u-picker mode="selector" v-model="Matching_show" :default-selector="[1]" :range="MatchingRange" @confirm="selectMatching"></u-picker>
					</div>
					
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">行业类别</div>
						<div class="aui-flex-triangle" @click="Industry_Show = true">{{TaskInfo.Industry}}</div>
						<u-picker mode="selector" v-model="Industry_Show" :default-selector="[3]" :range="IndustryRange" @confirm="selectIndustry"></u-picker>
					</div>
					
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">招聘截止时间<span class="u-pl-5"><u-icon name="question-circle" top="1" size="30" @click="showTips('EndTime')"></u-icon></span></div>
						<div class="aui-flex-triangle" @click="EndTime_Show = true">
							<span v-if="TaskInfo.EndTime">{{TaskInfo.EndTime}}</span>
							<span v-else>请选择</span>
						</div>
						<u-picker v-model="EndTime_Show" mode="time" @confirm="(event) => (TaskInfo.EndTime = `${event.year}-${event.month}-${event.day}`)"></u-picker>
					</div>
					<div class="aui-flex aui-choice-white aui-mar15">
						<div class="aui-flex-box">提交简历周期(天)<span class="u-pl-5"><u-icon name="question-circle" top="1" size="30" @click="showTips('LimitDays')"></u-icon></span></div>
						<u-number-box v-model="TaskInfo.LimitDays"></u-number-box>
					</div>
					
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">自动组队<span class="u-pl-5"><u-icon name="question-circle" top="1" size="30" @click="showTips('OrganizeTeam')"></u-icon></span></div>
						<div class="aui-flex-triangle" @click="toSelectTeams">
							<span v-if="PrivateTeam.TeamNo">{{PrivateTeam.TeamName}}</span>
							<span v-else>请选择</span>
						</div>
					</div>
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">处理人员<span class="u-pl-5"><u-icon name="question-circle" top="1" size="30" @click="showTips('Rate')"></u-icon></span></div>
						<div class="aui-flex-triangle" @click="toSelectUsers">
							<span>{{Inspector.MemberName}}</span>
						</div>
					</div>
					
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">客服人员<span class="u-pl-5"><u-icon name="question-circle" top="1" size="30" @click="showTips('CS')"></u-icon></span></div>
						<div class="aui-flex-triangle" @click="CS_Show = true">{{csNameText?csNameText:'请选择'}}</div>
						<!-- <u-picker mode="selector" v-model="CS_Show" :default-selector="[0]" :range="CSRange" @confirm="selectCS"></u-picker> -->
						<u-select v-model="CS_Show" :list="CSRange" @confirm="SelectCS"></u-select>
					</div>
					
				</div>
			</section>
			
			<div style="height: 30px;"></div>
			
			<div class="aui-bar-footer">
				<div class="aui-flex">
					<div class="aui-flex-box">
						<!-- 应付金额：<span>￥{{TaskInfo.Salary}}</span> -->
					</div>
					<div>
						<u-button :disabled="isClick" :custom-style="{background:'#f21956',padding:'52rpx 50rpx',color:'#fff',fontSize:'28rpx',borderRadius:'0rpx'}" @click="PublishTask">发布任务</u-button>
					</div>
				</div>
			</div>
			
			<!-- 点击问号弹出提示窗 -->
			<div>
				<u-modal v-model="TipsShow" :content="TipsContent"></u-modal>
			</div>
			
		</section>
	</div>
</template>

<script>
	import globalData from "@/globalData";
	export default {
		data() {
			return {
				TaskInfo: {},// 任务信息
				KeyWordList: [],// 关键字
				Industry_Show: false,// 推广类别选择弹窗控制
				IndustryRange: [],
				EndTime_Show: false,// 招聘截止时间选择弹窗控制
				LimitDays_Show: false,// 提交简历的默认时长选择弹窗控制
				Matching_show: false,// 是否匹配拍档选择弹窗控制
				MatchingRange: ['是', '否'],
				isClick: false,
				CS_Show: false,// 客服选择弹窗控制
				CSRange: [],
				csNameText: '',
				Inspector: {
					Member: '',
					MemberName: '',
					avatarUrl: ''
				},
				PrivateTeam: {},
				TipsShow: false,
				TipsContent: '',
				EndTimeContent: '招聘活动中最迟的提交简历时间，到此时间招聘活动将结束，平台会收回已报名但未提交简历的拍档。',
				OrganizeTeamContent: '发起招聘活动时允许选择一个已创建的私有团队，来汇聚有兴趣参与并提交简历的拍档。主要用于组队汇聚志同道合的拍档，以备后续进一步扩大合作。若您在选择私有团队列表中没有找到合适的私有团队，请联系招聘活动所在私有场景的拥有者或管理员让其协助建立合适的私有团队。',
				LimitDaysContent: '当拍档报名参与招聘后，拍档将被要求在此周期(天)内提交第1次简历，否则将以过期作废为由收回拍档资格让予其他人。若拍档在临近招聘结束时间前报名，且按此周期(天)算出的时间超出招聘截止时间，则以招聘截止时间为拍档最后提交简历的时间，超过该时间未提交简历的也将以过期作废为由收回拍档的资格。',
				RateContent: '允许从私有场景的所有拍档储备中，选择一拍档来负责对当前测评的验收和后续评级动作。让采购人只负责采购付款，指定更专业的人做验收和评级。',
				CSContent: '选择一个客服人员来负责对当前招聘，为拍档解答疑问，或提供帮补。'
			}
		},
		
		onLoad(options) {
			
			// 未登录跳转到登录页面
			var loginRes = this.checkLogin()
			if (!loginRes) {
			  return false;
			}
			
			// 初始化数据信息
			let TaskBasicInfo = decodeURIComponent(options.TaskBasicInfo)
			if(this.isNotNull(TaskBasicInfo)){
				this.TaskInfo = JSON.parse(TaskBasicInfo);
				console.log("任务基本信息TaskInfo=", this.TaskInfo);
				
				// 渲染标签
				this.KeyWordList =  this.RestructuringLabel(this.TaskInfo.KeyWord);// 关键字
				
			} else {
				this.showMSG('error','初始化数据出错啦！')
			}
			
			// 初始化提交简历周期，默认值为3
			this.TaskInfo.LimitDays = 3;
			
			// 获取客服人员列表
			this.getCSRange();
			
			// 获取推广类别
			this.getIndustryRange();
			
			// 初始化验收人员为任务发起人
			this.initInspector()
			
			// 保存选中的验收人员
			uni.$on("saveUserObj", (userObj = {}) => {
				if(JSON.stringify(userObj) == '{}' || Object.keys(userObj).length == 0){
					this.initInspector()
				} else {
					this.Inspector.Member = userObj.userid
					this.Inspector.MemberName = userObj.nickName
					this.Inspector.avatarUrl = userObj.avatarUrl
				}
				console.log("this.Inspector=", this.Inspector)
			});
			
			// 保存选中的组队团队列表
			uni.$on("saveTeamList", (teamList = []) => {
				if(teamList.length > 0){
					this.PrivateTeam = teamList[0]
				}else{
					this.PrivateTeam = {}
				}
			});
			
		},
		
		methods: {
			
			/**
			 * 初始化验收人员为任务发起人
			 */
			initInspector(){
				//发起人默认值为当前用户
				this.Inspector.Member = uni.getStorageSync('userInfo').userId
				this.Inspector.MemberName = uni.getStorageSync('userInfo').nickName
				this.Inspector.avatarUrl = uni.getStorageSync('userInfo').avatarUrl
			},
			
			/**
			 * 获取客服人员列表
			 */
			async getCSRange() {
			  const userInfo = uni.getStorageSync('userInfo');
			  let result = await this.$u.api.unifyRequest({
				  userId: userInfo.userId,
				  nickName: userInfo.nickName,
				  appid: 'Recruit3',
				  wf_num: 'R_Recruit3_B003',
				  loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if(result.code == 200){
					this.CSRange = result.data;
					this.csNameText = this.CSRange[0].label;
				}
			},
			
			/**
			* 获取推广类别（行业）
			*/
			async getIndustryRange(){
			  const userInfo = uni.getStorageSync('userInfo');
			  let result = await this.$u.api.unifyRequest({
			    userId: userInfo.userId,
			    nickName: userInfo.nickName,
			    appid: 'Recruit3',
			    wf_num: 'R_Recruit3_B002',
			    loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
			  });
			  if(result.code == "200"){
			    this.IndustryRange = result.data
				this.TaskInfo.Industry = this.IndustryRange[3];
			  }
			},
			
			/**
			 * 是否匹配用户
			 */
			selectMatching($event){
				this.TaskInfo.EnableMatching = this.MatchingRange[$event]
			},
			
			/**
			 * 选择推广类别
			 */
			selectIndustry($event){
				this.TaskInfo.Industry = this.IndustryRange[$event]
			},
			
			/**
			 * 选择客服
			 * @param {Object} e
			 */
			SelectCS(event){
				this.csNameText = event[0].label;
				this.TaskInfo.CSID = event[0].value;
			},
			
			/**
			 * 跳转到任务详情
			 */
			toTaskDetail(){
				this.$u.route('/pages_private_scene2/Recruit3/SetTask?SceneAssetsId='+this.TaskInfo.SceneAssetsId+'&SceneID='+this.TaskInfo.SceneID+'&WF_OrUnid='+this.TaskInfo.ProductID)
			},
			
			/**
			 * 跳转到选择团队页面
			 */
			toSelectTeams(){
				this.$u.route('/pages_private_scene2/Recruit3/common/selectTeams?SceneAssetsId=' + this.TaskInfo.SceneAssetsId + '&owner=' + this.TaskInfo.Initiatorid + '&TeamNo=' + this.PrivateTeam.TeamNo + '&TeamName=' + this.PrivateTeam.TeamName)   
			},
			
			/**
			 * 跳转到选人页面(单选)
			 */
			toSelectUsers(){
				this.$u.route('/pages_private_scene2/Recruit3/common/selectUser?SceneAssetsId=' + this.TaskInfo.SceneAssetsId + '&owner=' + this.TaskInfo.Initiatorid + '&limit=1&selectUsers=' + this.getUserIdsByCurrent())   
			},
			
			/**
			 * 获取当前成员列表的用户id串，用,隔开
			 */
			getUserIdsByCurrent(){
			  let selectUsers = this.Inspector.Member
			  return selectUsers
			},
			
			/**
			 * 发布任务
			 */
			async PublishTask() {
				
			  if(!this.isNotNull(this.TaskInfo.Salary)){
				  this.showMSG('none','请填写报酬！')
				  return
			  }
			  
			  if(!this.isNotNull(this.TaskInfo.TotalQuota)){
				  this.showMSG('none','请填写招聘名额！')
				  return
			  }
			  
			  if(!this.isNotNull(this.TaskInfo.Industry)){
				  this.showMSG('none','请选择行业类别！')
				  return
			  }
			  
			  if(!this.isNotNull(this.TaskInfo.EndTime)){
				  this.showMSG('none','请选择招聘截止时间！')
				  return
			  }
			  
			  // 显示 loading 提示框
			  uni.showLoading({
			      mask: true,
			  });
			  
			  // 设置按钮为不可点击
			  this.isClick = true;
			
			  // 验收人员
			  this.TaskInfo.Inspectorid = this.Inspector.Member
			  this.TaskInfo.InspectorName = this.Inspector.MemberName
			  
			  // 私有团队编号
			  if(this.isNotNull(this.PrivateTeam.TeamNo)){
				 this.TaskInfo.PrivateTeamNo = this.PrivateTeam.TeamNo 
			  } else {
				  this.TaskInfo.PrivateTeamNo = ''
			  }
			  
			  // 客服人员处理。只取id部分
			  this.TaskInfo.CSID = this.TaskInfo.CSID.split("(")[0];
			  
			  console.log("发布任务TaskInfo=", this.TaskInfo);
			  
			  const userInfo = uni.getStorageSync('userInfo');
			  let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Recruit3',
					wf_num: 'R_Recruit3_BL002',
					WF_formData: this.TaskInfo,
				    loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if(result.code == 200){
					uni.hideLoading();
					uni.reLaunch({url:'/pages_private_scene2/Recruit3/common/result?mode=1&Subject=' + this.TaskInfo.Subject+'&MainDocUnid=' + this.TaskInfo.docUnid});
				}
			},
			
			/**
			 * 点击问号提示
			 */
			showTips(type){
				if(type == 'EndTime'){
					this.TipsContent = this.EndTimeContent
					this.TipsShow = true
				}else if(type == 'LimitDays'){
					this.TipsContent = this.LimitDaysContent
					this.TipsShow = true
				}else if(type == 'OrganizeTeam'){
					this.TipsContent = this.OrganizeTeamContent
					this.TipsShow = true
				}else if(type == 'Rate'){
					this.TipsContent = this.RateContent
					this.TipsShow = true
				}else if(type == 'CS'){
					this.TipsContent = this.CSContent
					this.TipsShow = true
				}
			}
			
		}
	}
</script>

<style scoped>
	aui-flexView {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.aui-scrollView {
		width: 100%;
		height: 100%;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		position: relative;
		margin-top: 0;
	}

	.aui-navBar {
		height: 44px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		z-index: 1002;
		background: #f7f7f7;
	}

	.b-line {
		position: relative;
	}

	.b-line:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #e2e2e2;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.aui-navBar-item {
		height: 44px;
		min-width: 25%;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 25%;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		padding: 0 0.9rem;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		font-size: 0.7rem;
		white-space: nowrap;
		overflow: hidden;
		color: #353535;
		position: relative;
	}

	.aui-navBar-item:first-child {
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		-ms-flex-order: 1;
		order: 1;
		margin-right: -25%;
		font-size: 0.9rem;
		font-weight: bold;
	}

	.aui-navBar-item:last-child {
		-webkit-box-ordinal-group: 4;
		-webkit-order: 3;
		-ms-flex-order: 3;
		order: 3;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}

	.aui-center {
		-webkit-box-ordinal-group: 3;
		-webkit-order: 2;
		-ms-flex-order: 2;
		order: 2;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		height: 44px;
		width: 50%;
		margin-left: 25%;
	}

	.aui-center-title {
		text-align: center;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		text-overflow: ellipsis;
		font-size: 0.95rem;
		color: #333;
	}

	.icon {
		width: 20px;
		height: 20px;
		display: block;
		border: none;
		float: left;
		background-size: 20px;
		background-repeat: no-repeat;
	}

	.aui-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 15px;
		position: relative;
	}

	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		font-size: 14px;
		color: #333;
	}

	.aui-flex-triangle {
		position: relative;
		font-size: 14px;
		padding-right: 15px;
	}

	.aui-flex-triangle:before {
		content: '';
		width: 0;
		height: 0;
		border-width: 5px 0px 5px 8px;
		border-style: solid;
		border-color: transparent transparent transparent #7b7b7b;
		position: absolute;
		top: 6px;
		right: 0;
		border-radius: 1;
	}

	.aui-choice-white {
		background: #fff;
	}

	.aui-order-box {
		padding: 10px 20px;
	}

	.aui-flex-goods {
		margin-right: .8em;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
	}

	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
	}

	.aui-flex-default {
		background: #f3f1f1;
	}

	.aui-flex-default h2 {
		font-size: 14px;
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-wrap: normal;
		word-wrap: break-word;
		word-break: break-all;
		padding-bottom: 5px;
	}

	.aui-flex-default p {
		color: #999999;
		font-size: 12px;
	}

	.aui-flex-clear {
		padding: 0;
		margin-top: 20px;
	}

	.aui-flex-clear .aui-flex-box {
		color: #f21956;
		font-weight: bold;
	}

	.aui-mar15 {
		margin-bottom: 15px;
	}

	.aui-flex-triangle-clear:before {
		border-color: #fff;
	}

	.aui-flex-box h2 {
		font-size: 16px;
		padding-bottom: 5px;
	}

	.aui-flex-box h3 {
		font-size: 14px;
		padding-bottom: 5px;
	}

	.aui-flex-box p {
		padding-top: 5px;
		font-size: 12px;
		color: #999;
		line-height: 1.2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.aui-bar-footer {
		line-height: 52px;
		height: 52px;
		background: #fff;
		box-shadow: 0 -2px 10px #ddd;
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.aui-btn-button {
		background: #f21956;
		padding: 0 25px;
		color: #fff;
		font-size: 14px;
	}

	.aui-bar-footer .aui-flex {
		padding: 0;
	}

	.aui-bar-footer .aui-flex-box {
		padding-left: 15px;
	}

	.aui-bar-footer .aui-flex-box span {
		font-style: normal;
		color: #f21956;
	}
	
	.cnt {
		padding-top: 1px;
		color: #e61111;
		position: relative;
		line-height: 22px;
		font-size: 14px;
		font-weight: 500;
	}
	
	.aui-tag {
		display:inline
	}
</style>
